<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="page-tools">
        <el-row type="flex" justify="space-between" align="middle">
          <div class="left">
            <el-col>
              <el-button
                v-if="assignPerm('add-but')"
                size="small"
                type="primary"
                @click="addFn"
                >添加房产</el-button
              >
            </el-col>
          </div>
          <div class="right">
            <el-button @click="reset">重置</el-button>
            <el-select
              v-model="categoryId"
              class="manager"
              placeholder="全部分类"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="agentId"
              class="all-categories"
              placeholder="全部经纪"
            >
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input
              v-model="propertykeyword"
              placeholder="请输入关键字"
              @keydown.enter.native="searchFn"
            />
            <el-button @click="searchFn">筛选</el-button>
          </div>
        </el-row>
        <div class="border" />
        <el-table :data="propertyList" border style="width: 100%">
          <el-table-column align="center" label="封面">
            <template slot-scope="scope">
              <img :src="scope.row.image" alt="" style="width: 90px" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="标题" />
          <el-table-column align="center" label="标签" width="130">
            <template slot-scope="scope">
              <el-tag
                v-for="(item, index) in scope.row.tags"
                :key="index"
                style="margin-bottom: 5px; margin-right: 5px"
                type="success"
                >{{ item }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="address" label="地址" />
          <el-table-column align="center" prop="category.title" label="分类" />
          <el-table-column align="center" prop="agent.name" label="经纪" />
          <el-table-column align="center" prop="price" label="价格" />
          <el-table-column align="center" prop="desc" label="介绍" />
          <el-table-column align="center" label="图片">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.photos" :key="index">
                <img :src="item" style="width: 90px" />
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="145">
            <template v-slot="{ row }">
              <el-button
                v-if="assignPerm('edit-but')"
                size="small"
                type="primary"
                @click="editFn(row.id)"
              >
                编辑</el-button
              >
              <el-button
                v-if="assignPerm('dele-but')"
                size="small"
                type="danger"
                @click="delFn(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="size"
            @current-change="changePage"
          />
        </el-row>
      </el-card>

      <!-- 弹窗 -->
      <PropertyDialog
        ref="propertyDialog"
        :show-dialog.sync="showDialog"
        @updateEvent="Fun"
      />
    </div>
  </div>
</template>

<script>
import {
  getPropertyList,
  delProperty,
  getPropertyNum,
  getCategoryList,
  getManagerList,
} from "@/api/property";
import PropertyDialog from "./components/property-dialog.vue";
export default {
  components: {
    PropertyDialog,
  },
  data() {
    return {
      size: 5,
      keyword: "",
      propertyList: [],
      limit: 5, // 最大条数
      start: 0, // 第几条开始
      showDialog: false,
      page: 1, // 当前页码
      total: 0, // 数据数量
      categoryList: [],
      agentList: [],
      agentId: "",
      categoryId: "",
      propertykeyword: "",
    };
  },
  async created() {
    this.getPropertyList();
    this.total = await getPropertyNum();
    this.categoryList = await getCategoryList();
    this.agentList = await getManagerList();
  },
  methods: {
    Fun() {
      this.getPropertyList();
    },
    reset() {
      this.agentId = "";
      this.categoryId = "";
      this.propertykeyword = "";
      this.page = 1;
      this.start = 0;
      this.getPropertyList();
    },
    async searchFn() {
      const res = await getPropertyList({
        title_contains: this.propertykeyword || null,
        agent: this.agentId || null,
        category: this.categoryId || null,
      });
      this.propertyList = res;
      // this.agentId = "";
      // this.categoryId = "";
      // this.propertykeyword = "";
      this.total = this.propertyList.length;
    },
    editFn(id) {
      this.showDialog = true;
      this.$refs.propertyDialog.getPropertyById(id);
    },
    addFn() {
      this.showDialog = true;
    },
    async getPropertyList() {
      this.total = await getPropertyNum({
        title_contains: this.propertykeyword || null,
        agent: this.agentId || null,
        category: this.categoryId || null,
      });
      const res = await getPropertyList({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.propertykeyword || null,
        agent: this.agentId || null,
        category: this.categoryId || null,
      });
      this.propertyList = res;
    },
    delFn(id) {
      this.$confirm("是否确认删除", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delProperty(id);
          if (this.total !== 1 && this.propertyList.length === 1) {
            this.start = this.start - 5;
          } else if (this.total === 1) {
            this.start = 0;
          }
          this.getPropertyList();
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    changePage(page) {
      this.page = page;
      this.start = (page - 1) * this.limit;
      this.getPropertyList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .page-tools {
  margin: 10px 0;
  padding: 0px 15px;
  border-radius: 3px;
  .el-card__body {
    padding: 20px 0px;
  }
  .right {
    display: flex;
  }
  .el-table {
    margin-top: 20px;
    // border-top: 2px solid #ddd;
  }
  .border {
    widows: 100%;
    height: 1px;
    background-color: #ddd;
    margin-top: 20px;
  }
  //  .cell{
  //   display: flex;
  //  }
}
</style>
